<template>
	<view>
		<view class="wrap-container">
			<view class="warp-input">
				<view class="warp-text">{{equipment_name}}</view>

				<view v-if="this.status == '异常'" class="status-badge status-1">异常</view>
				<view v-else-if="this.status == '运行'" class="status-badge status-2">运行</view>
				<view v-else-if="this.status =='停止'" class="status-badge status-3">停止</view>
				<view v-else class="status-badge status-4">维修维护</view>

			</view>
			<u-gap height="5" bg-color="#f5f5f5"></u-gap>
			<view class="warp-input">
				<view class="warp-text">设备编号</view>
				<view class="warp-text">{{equip_id}}</view>
			</view>
			<u-gap height="5" bg-color="#f5f5f5"></u-gap>
			<view class="warp-input">
				<view class="warp-text">设备类型</view>
				<view class="warp-text">{{equipment_typecode}}</view>
			</view>
			<u-gap height="5" bg-color="#f5f5f5"></u-gap>
			<view class="warp-input">
				<view class="warp-text">设备型号</view>
				<view class="warp-text">{{usetime}}</view>
			</view>
			<u-gap height="5" bg-color="#f5f5f5"></u-gap>
			<view class="warp-input">
				<view class="warp-text">网络状态</view>
				<view class="warp-text">{{network_status}}</view>
			</view>
			<u-gap height="5" bg-color="#f5f5f5"></u-gap>
			<view class="warp-input">
				<view class="warp-text">备注</view>
				<view class="warp-text">{{useplace}}</view>
			</view>
		</view>


		<view class="detils-realValue">
			<view class="warp-input">
				<view class="warp-text">实时监测</view>
			</view>

			<view class="real-container">
				<view v-for="(item, index) in tags" :key="index" class="grid-item">
					<view class="warp-input2" @click="item.isAlarm > 0 ? handleClick(item.id) : null">
						<view class="warp-text" :style="{ color: item.isAlarm > 0 ? 'red' : 'black' }">
							{{item.tagName}}<span :style="{ color: item.isAlarm > 0 ? 'red' : 'black' }">{{item.value}}
								{{item.unit}}</span>
						</view>
					</view>
				</view>
				<u-gap height="5" bg-color="#f5f5f5" style="width: 94vw;"></u-gap>
			</view>
			<view class="details-button">
				<u-button @click="navDeclaration" type="primary" shape="circle" size="mini">故障申报</u-button>
			</view>
		</view>

	</view>
</template>
<script>
	import * as echarts from '@/uni_modules/lime-echart/static/echarts.min'
	export default {
		data() {
			return {
				id: "",
				type: 'text',
				height: 60,
				border: true,
				equipment_name: "",
				station_name: "",
				parent_uuid: "",
				equip_id: "",
				equipment_typecode: "",
				usetime: "",
				useplace: "",
				status: "",
				energy_waste: "",
				network_status: "",
				coordinate: "",
				ntervalId: null, // 定时器的 ID
				refreshCount: 0, // 计数器，记录当前已经请求的次数
				tags: [],
				count: 5,
				chart: '',
				valuesList: []
			}
		},

		onLoad(e) {
			this.startRefreshing();
			this.id = e.id
		},
		onReady() {
			this.getEqView();
		},
		onHide() {
			this.stopRefreshing();
			console.log('组件销毁')
		},
		beforeDestroy() {
			this.stopRefreshing(); // 在组件销毁前停止定时刷新
			console.log('组件销毁')
		},
		onUnload() {
			this.stopRefreshing();
			console.log('组件销毁')
		},
		methods: {
			navDeclaration() {
				const filteredTags = this.tags.filter(item => item.isAlarm > 0);
				const filteredEq = {
					tags: filteredTags,
					station_name: this.station_name,
					parent_uuid: this.parent_uuid,
					status: this.status
				}

				uni.navigateTo({
					url: '/pages/sys/order/newScheduling?data=' + encodeURIComponent(JSON
						.stringify(filteredEq))
				});
			},

			handleClick(item) {
				uni.navigateTo({
					url: '/pages/sys/equipment/detailFalarm?id=' + item
				});
			},
			refreshData() {
				this.$u.api.monitor({
					algorithmProcessId: "getEqReal",
					param: {
						data: {
							structure_uuid: this.equip_id
						}
					}
				}).then(response => {
					this.tags = response.data.data.result.tags;
					console.log(this.tags, "this.tags")
				}).catch(error => {
					console.error('数据获取错误:', error);
					alert('数据刷新失败，请稍后再试。');
				});
			},
			getEqView() {
				this.$u.api.eqView({
					"algorithmProcessId": "getEqview",
					"param": {
						"data": {
							id: this.id
						}
					}
				}).then(Response => {
					const res = Response.data.data.result[0]
					console.log(res, "res")
					this.station_name = res.station_name;
					this.equipment_name = res.equipment_name
					this.equip_id = res.equip_id
					this.parent_uuid = res.EqId
					this.refreshData();

					this.equipment_typecode = res.equipment_typecode
					this.usetime = res.usetime
					let coordinateArr = res.coordinate.split(",").map(item => item.trim());
					this.coordinate = (coordinateArr[0] && coordinateArr[1]) ?
						`${coordinateArr[0]},${coordinateArr[1]}` : '';

					this.useplace = res.useplace
					if (res.status) {
						let statusMap = {
							'1': '异常',
							'2': '运行',
							'3': '停止',
							'4': '维修维护'
						};
						this.status = statusMap[res.status]
						console.log(this.status, 'this.status')
					}
					if (res.network_status) {
						let netMap = {
							'0': '离线',
							'1': '在线',
						};
						this.network_status = netMap[res.network_status]
					}
				})
			},

			startRefreshing() {
				const interval = 5000; 
				// 设置定时器，每隔1秒执行一次refreshData方法
				this.intervalId = setInterval(() => {
					this.refreshData();
					console.log('轮询开始')
				}, interval);
			},
			stopRefreshing() {
				clearInterval(this.intervalId); // 停止定时器
			},

			navTo(url) {
				uni.navigateTo({
					url: url
				});
			},
			navMap(coordinate, equipment_name) {
				uni.navigateTo({
					url: "/pages/sys/equipment/install?coordinate=" + coordinate + "&equipment_name=" +
						equipment_name
				});

			},
		}
	}
</script>
<style lang="scss">
	@import 'style/details.scss';
</style>